<script setup>
import DirRenameDialog from "@/components/DirRenameDialog.vue";
import DirDetailDialog from "@/components/DirDetailDialog.vue";
import {reactive, ref} from "vue";
import {confirmBox, message} from "@/util/util";
import {postRequest} from "@/util/api";

const props = defineProps({
  initData: Function,
});

const data = reactive({
  visible: false,
  posX: 0,
  posY: 0,
  dir: {
    parentDirId: "",
    dirId: "",
    name: "",
    createTime: "",
  },
});

const dirDetailDialogRef = ref();
const dirRenameDialogRef = ref();

function openDetailDialog() {
  dirDetailDialogRef.value.openDirDetailDialog(data.dir);
}

function openRenameDirDialog() {
  const rename = {
    parentDirId: Number(data.dir.parentDirId),
    dirId: Number(data.dir.dirId),
    dirName: data.dir.name,
  };
  dirRenameDialogRef.value.openDirRenameDialog(rename);
}

function deleteDir() {
  confirmBox("确认删除该文件夹吗？", () => {
    postRequest("/dir/deleteDir", null, {
      dirId: Number(data.dir.dirId),
    }, (res) => {
      message(res.data.msg, "success");
      props.initData();
    });
  });
}

function showContextMenu(context) {
  data.dir = context.dir;
  data.posX = context.posX;
  data.posY = context.posY;
  data.visible = true;
}

function hiddenContextMenu() {
  data.visible = false;
}

defineExpose({
  showContextMenu,
  hiddenContextMenu,
});
</script>

<template>
  <ul v-show="data.visible" :style="{'left' : data.posX + 'px', 'top' : data.posY + 'px'}" class="context-menu"
      @click="data.visible = false">
    <li @click="openDetailDialog">查看详情</li>
    <li @click="openRenameDirDialog">重命名</li>
    <li>移动</li>
    <li @click="deleteDir">删除</li>
  </ul>

  <DirDetailDialog ref="dirDetailDialogRef"/>
  <DirRenameDialog ref="dirRenameDialogRef" :init-data="props.initData"/>
</template>

<style lang="scss" scoped>
.context-menu {
  position: absolute;
  list-style: none;
  width: 80px;
  height: 120px;
  background-color: white;
  z-index: 100;
  box-shadow: #888888 0 0 1px 1px;

  li {
    width: 80px;
    height: 30px;
    font-size: 12px;
    line-height: 30px;
    text-align: center;
    color: #2e2e2e;

    &:hover {
      background-color: gainsboro;
      cursor: pointer;
    }
  }
}
</style>